<template>
    <div style="margin-top: 20px;">
        <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :page-size="pagesize"
                :page-sizes="[100, 200, 300, 400]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage">
        </el-pagination>
    </div>
</template>
<style>

</style>
<script>
    export default {
        data () {
            return {
                msg: 'Hello vue',
                pagesize: 20,
                totalCount: 10000,
                currentPage: 1
            }
        },
        methods: {
            handleSizeChange: function (val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange: function (val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>
